<script setup lang='ts'>
import { ref } from "vue";
import useRule from "./useRule";
import useRegister from "./useRegister";
import useGetCode from "./useGetCode";

const form = ref<{ validate: () => Promise<unknown> } | null>(null)

// from 表单 验证
const { rules } = useRule()

// 获取邮箱验证码
const { getCode, emailCodeOptions } = useGetCode()

// 处理注册
const { HandleRegister, canClick, userInfo } = useRegister()

// 显示密码
const showPassword = ref(false)

</script>

<template>
  <view class='register__container plr-40'>
    <headerBar text="注册体验更多精彩"></headerBar>

    <view class="register-input__area">
      <uv-form :model="userInfo" ref="form" :rules="rules">
        <uv-form-item prop="email" borderBottom>
          <uv-input maxlength="70" placeholder="邮箱" v-model="userInfo.email" border="none">
          </uv-input>
        </uv-form-item>
        <uv-form-item prop="password" borderBottom>
          <uv-input placeholder="密码" maxlength="18" :password="!showPassword" v-model="userInfo.password" border="none">
          </uv-input>
          <template v-slot:right>
            <uv-icon name="eye" @click="showPassword = !showPassword" :color="showPassword ? '#2979ff' : ''"
              size="28"></uv-icon>
          </template>
        </uv-form-item>
        <uv-form-item prop="code" borderBottom>
          <uv-input v-model="userInfo.code" placeholder="邮箱验证码" maxlength="6" type="number" border="none">
          </uv-input>
          <template v-slot:right>
            <uv-button @click="getCode(userInfo.email)" type="primary" size="mini" :plain="true"
              :disabled="emailCodeOptions.disabled" :text="emailCodeOptions.text"></uv-button>
          </template>
        </uv-form-item>
      </uv-form>

      <view class="input-operator mt-40">
        <uv-button @click="HandleRegister(form)" type="primary" :disabled="!canClick" text="注册"></uv-button>
      </view>
    </view>
  </view>
</template>

<style scoped lang='scss'></style>